@import "common.css";

#container-main {
  padding-bottom: 60px;
  overflow: hidden;
  background: #F5F5F5;
  .content-layout {
    .layui-breadcrumb{
      background-color: #fff;
      padding: 30px;
      display: block;
      a,span{
        text-decoration: none;
        font-size: 20px;
        color: #9B9B9B;
        letter-spacing: 0;
        line-height: 20px;
        &:hover{
          color: #666666!important;
        }
      }
    }
    .curse-main{
      background-color: #fff;
      padding-bottom:30px;
      margin-bottom: 10px;
      .jump-live{
        text-decoration: none;
        display: inline-block;
        width: 600px;
        height: 338px;
        position: relative;
        .up-shade{
          width: 100%;
          height: 100%;
          position: relative;
          z-index: 500;
          overflow: hidden;
          background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 40%, rgba(50,50,50,0.20) 89%, rgba(0,0,0,0.30) 100%, rgba(0,0,0,0.20) 100%);
          .start-btn{
            display: block;
            margin:139px 0 0 282px;
            width: 36px;
            height: 36px;
            background-color: #EEEEEE;
          }
          .free-study{
            margin-top: 10px;
            font-size: 14px;
            color: #FFBD00;
            letter-spacing: 0;
            text-align: center;
            line-height: 14px;
          }
        }
        img{
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
      .curse-right{
        vertical-align: top;
        width: 540px;
        display: inline-block;
        margin-left: 30px;
        .curse-name{
          margin-bottom: 15px;
          font-size: 20px;
          color: #4A4A4A;
          letter-spacing: 0;
          line-height: 30px;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
        .fun-box-curse{
          margin-bottom: 20px;
          overflow: hidden;
          .curse-f-item{
            position: relative;
            float: left;
            font-size: 14px;
            color: #9B9B9B;
            letter-spacing: 0;
            line-height: 14px;
            margin-right: 32px;
            &:nth-child(2)::before,&:nth-child(3)::before{
              content: '';
              position: absolute;
              width: 2px;
              height: 2px;
              background-color: #9B9B9B;
              left: -18px;
              top: 6px;
            }
            .icon-btn{
              display: inline-block;
              font-size: 12px;
              color: #9B9B9B;
              letter-spacing: 0;
              line-height: 12px;
              text-decoration: none;
              .icon{
                display: inline-block;
                width: 12px;
                height: 12px;
                vertical-align: middle;
                background-color: #999999;
                margin-right: 10px;
              }
            }
          }
        }
        .curse-cost{
          display: block;
          font-size: 24px;
          color: #FFBD00;
          letter-spacing: 0;
          line-height: 24px;
          margin-bottom: 50px;
        }
        .curse-inform{
          overflow: hidden;
          display: block;
          .inform-list{
            margin-bottom: 20px;
            font-size: 16px;
            color: #4A4A4A;
            letter-spacing: 0;
            line-height: 16px;
            .right-msg{
              margin-left: 20px;
              display: inline-block;
              text-decoration: none;
              .icon-ticket{
                display: inline-block;
                width: 12px;
                height: 12px;
                vertical-align: middle;
                background-color: #FFBD00;
              }
            }
            .ticket-get{
              color: #FFBD00;
            }
          }
        }
        .main-fun-box{
          .layui-btn{
            text-decoration: none;
            float: right;
            width: 132px;
            height: 46px;
            line-height: 46px;
            display: block;
            border-radius: 8px;
            text-align: center;
            font-size: 14px;
            color: #94A5FA;
            letter-spacing: 0;
            border: 1px solid #94A5FA;
            margin-left: 20px;
          }
          .buy{
            background: #2F5AFF;
            color: #ffffff;
          }
          .consult{
            background-color: #fff;
            color: #94A5FA;
          }
        }

      }
    }
    .curse-particulars{
      width: 100%;
      .particulars-left{
        float: left;
        display: inline-block;
        width: 870px;
        overflow: hidden;
        background-color: #fff;
        .layui-tab{
          .particulars-l-t{
            width: 100%;
            height: 58px;
            background: #FFFFFF;
            box-shadow: 0 2px 4px 0 rgba(0,0,0,0.05);
            .layui-tab-title{
              border: none;
              display: flex;
              justify-content: center;
              .layui-this{
                &::after{
                  border: none;
                  border-bottom: 2px solid #2F5AFF;
                }
              }
              li{
                margin:0 80px;
                font-weight:600;
              }
            }
          }
          .layui-tab-content{
            padding:40px 30px;
            .layui-tab-item{
              .cate-title{
                font-size: 18px;
                color: #9B9B9B;
                letter-spacing: 0;
                line-height: 18px;
                margin-bottom: 20px;
              }
              .cate-detail{
                dt{
                  margin-bottom: 15px;
                  font-weight:500;
                  font-size: 17px;
                  color: #4A4A4A;
                  letter-spacing: 0;
                  line-height: 17px;
                  span{
                    margin-right: 10px;
                  }
                }
                dd{
                  margin-bottom: 15px;
                  padding-left: 30px;
                  .icon-play{
                    vertical-align: top;
                    display: inline-block;
                    width: 30px;
                    height: 19px;
                    background: #A5A9AD;
                    border-radius: 4px;
                    margin-right: 15px;
                  }
                  .class-msg{
                    margin-right: 34px;
                    width: 244px;
                    display: inline-block;
                    .class-title{
                      font-size: 16px;
                      color: #4A4A4A;
                      letter-spacing: 0;
                      line-height: 16px;
                      margin-bottom: 8px;
                    }
                    .class-date{
                      font-size: 14px;
                      color: #9B9B9B;
                      letter-spacing: 0;
                      line-height: 14px;
                    }
                  }
                  .study-free-btn{
                    padding: 0;
                    vertical-align: top;
                    display: inline-block;
                    text-decoration: none;
                    width: 92px;
                    height: 33px;
                    border: 1px solid #94A5FA;
                    border-radius: 8px;
                    font-size: 15px;
                    color: #94A5FA;
                    letter-spacing: 0;
                    text-align: center;
                    line-height: 33px;
                    background-color: #fff;
                  }
                }
                .active{
                  .icon-play{
                    background: #FFBD00;
                  }
                  .class-msg{
                    .class-title,.class-date{
                      color: #FFBD00;
                    }
                  }
                }
              }

            }
            .common-part{
              .top-choose{
                margin-bottom: 20px;
                .good-rep{
                  display: inline-block;
                  font-size: 18px;
                  color: #FFBD00;
                  letter-spacing: 0;
                  line-height: 18px;
                  margin-right: 50px;
                }
                .com-choose{
                  display: inline-block;
                  .com-level{
                    cursor: pointer;
                    float: left;
                    margin-right: 30px;
                    font-size: 14px;
                    color: #9B9B9B;
                    letter-spacing: 0;
                    line-height: 14px;
                    .layui-icon{
                      margin-right: 10px;
                    }
                  }
                  .choose{
                    color: #FFBD00;
                  }
                }
              }
              .com-list{
                .com-item{
                  width: 100%;
                  margin-bottom: 20px;
                  .com-top{
                    margin-bottom: 11px;
                    .com-t-l{
                      display: inline-block;
                      .user-header-c{
                        width: 64px;
                        height: 64px;
                        display: inline-block;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 20px;
                        img{
                          width: 100%;
                          height: 100%;
                        }
                      }
                      .user-inform{
                        vertical-align: top;
                        margin-top: 10px;
                        display: inline-block;
                        .user-name-c{
                          font-size: 20px;
                          color: #4A4A4A;
                          letter-spacing: 0;
                          line-height: 20px;
                          margin-bottom: 15px;
                        }
                        .com-date-c{
                          font-size: 14px;
                          color: #D0D4DB;
                          letter-spacing: 0;
                          line-height: 14px;
                        }
                      }
                    }
                    .com-t-r{
                      float: right;
                      margin-top: 12px;
                      #com1{
                        font-size: 20px;
                      }
                    }
                  }
                  .com-bottom{
                    display: block;
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
                    -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
                    -webkit-line-clamp: 2; /** 显示的行数 **/
                    overflow: hidden;
                    font-size: 14px;
                    color: #4A4A4A;
                    letter-spacing: 0;
                    line-height: 24px;
                  }
                }
              }
            }
            .curse-intro{
              .curse-i-title{
                font-size: 18px;
                color: #4A4A4A;
                letter-spacing: 0;
                line-height: 18px;
                margin-bottom: 21px;
                clear: both;
              }
              .impress-list{
                overflow: hidden;
                display: block;
                margin-bottom: 41px;
                .impress{
                  float: left;
                  width: 84px;
                  height: 26px;
                  border: 1px solid #94A5FA;
                  border-radius: 8px;
                  font-size: 14px;
                  color: #94A5FA;
                  letter-spacing: 0;
                  text-align: center;
                  line-height: 26px;
                  margin-right: 22px;
                }
              }
              .teacher-box{
                .teacher-top{
                  margin-bottom: 15px;
                  .teacher-header-i{
                    width: 64px;
                    height: 64px;
                    border-radius: 50%;
                    overflow: hidden;
                    display: inline-block;
                    margin-right: 20px;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
                  .teacher-intro-base{
                    display: inline-block;
                    vertical-align: top;
                    .teacher-name-i{
                      margin-top: 8px;
                      margin-bottom: 16px;
                      display: inline-block;
                      font-size: 20px;
                      color: #2F5AFF;
                      letter-spacing: 0;
                      line-height: 20px;
                    }
                    .teacher-iden{
                      margin-left: 20px;
                      display: inline-block;
                      font-size: 14px;
                      color: #9B9B9B;
                      letter-spacing: 0;
                      line-height: 14px;
                    }
                  }
                  .teacher-eval{
                    display: block;
                    .eval-item{
                      float: left;
                      font-size: 14px;
                      color: #9B9B9B;
                      letter-spacing: 0;
                      line-height: 14px;
                      border-right:1px solid  #D0D4DB;
                      padding-right:40px;
                      margin-right: 40px;
                      &:last-child{
                        margin-right: 0px;
                        padding-right:0;
                        border: none;
                      }
                      .eval-d{
                        margin-left: 5px;
                      }
                    }
                  }
                  .follow-btn{
                    background: #94A5FA;
                    border-radius: 8px;
                    font-size: 14px;
                    color: #FFFFFF;
                    letter-spacing: 0;
                    text-align: center;
                    display: block;
                    float: right;
                    text-decoration: none;
                    width: 92px;
                    height: 33px;
                    line-height: 33px;
                    margin-top: 15px;
                  }
                }
              }
              .intro-box{
                margin-bottom: 40px;
                font-size: 14px;
                color: #4A4A4A;
                letter-spacing: 0;
                line-height: 24px;
                text-indent: 2em;
              }
              .poster{
                width: 100%;
                height: 600px;
              }
            }
            #laypage-f,#laypage-s,#laypage-t{
              .layui-laypage{
                clear: both;
                margin: 47.5px 0 10px 230px;
                a,span{
                  overflow: hidden;
                  color: #999999;
                  text-align: center;
                  padding: 0;
                  width: 31px;
                  height: 31px;
                  background: #F8F9FB;
                  border-radius: 8px;
                  margin-right: 20px;
                }
              }
            }
          }
        }
      }
      .particulars-right{
        float: left;
        display: inline-block;
        width: 320px;
        margin-left: 10px;
        .download-m{
          background-color: #fff;
          width: 100%;
          height: 156px;
          padding: 20px 15px;
          margin-bottom: 10px;
          .m-name{
            font-size: 16px;
            color: #4A4A4A;
            letter-spacing: 0;
            line-height: 26px;
            margin-bottom: 22px;
            .m-logo{
              width: 32px;
              height: 32px;
              display: inline-block;
              margin-right: 10px;
              background-color: #2F5AFF;
              vertical-align: top;
            }
          }
          .download-btn{
            text-decoration: none;
            font-size: 14px;
            color: #94A5FA;
            letter-spacing: 0;
            line-height: 14px;
            display: block;
            text-align: center;
            .icon-down{
              display: inline-block;
              width: 14px;
              height: 14px;
              background-color: #94A5FA;
              vertical-align: middle;
            }
          }
        }
        .m-title{
          font-size: 20px;
          color: #4A4A4A;
          letter-spacing: 0;
          line-height: 20px;
          margin-bottom: 20px;
        }
        .curse-rec{
          width: 100%;
          height: 692px;
          background-color: #fff;
          padding: 20px 15px;
          .z-b-unit{
            width: 280px;
            float: left;
            background: #FFFFFF;
            border: 1px solid #EEEEEE;
            border-radius: 8px;
            height: 287px;
            margin-bottom: 20px;
          }
          .curse-live{
            position: relative;
            overflow: hidden;
            float: left;
            margin-right: 26px;
            width: 280px;
            height: 287px;
            border-radius: 8px;
            background-color: #fff;
            border: 1px solid #DAE0FD;
            .cur-live-img{
              margin-bottom: 10px;
              display: block;
              width: 100%;
              height: 157px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            &:hover{
              box-shadow: 0 2px 4px 2px rgba(218,224,253,0.8);
            }
            &:last-child{
              margin-right: 0;
            }
            &:nth-child(3){
              margin-right: 0;
            }
            .curse-name{
              text-decoration: none;
              height: 56px;
              display: block;
              .font-size16();
              color:#4A4A4A;
              padding: 4px;
            }
            .teachers{
              padding: 0 4px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .z-b-curse-garde{
                float: left;
                li{
                  float: left;
                  margin-right: 6px;
                  width: 15px;
                  height: 15px;
                  background: #FFBD00;
                }
                .garde{
                  float: left;
                  font-size: 15px;
                  color: #9B9B9B;
                  font-style: normal;
                }
              }
              .teacher-name{
                font-weight:700;
                display: inline-block;
                font-size: 20px;
                color: #17BC3F;
              }

            }
            .has-learn{
              display: inline-block;
              position: absolute;
              bottom: 10px;
              right: 12px;
              font-size: 15px;
              color: #D0D4DB;
              letter-spacing: 0;
              line-height: 15px;
              i{
                font-style: normal;
              }
            }
          }
        }
      }
    }

  }
}

.curse-fun {
  display: none;
  .full-shade {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10003;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
    /*兼容IE8及以下版本浏览器*/
    filter: alpha(opacity=30);
    display: block;
  }
  .hide-style {
    display: none;
    border-radius: 8px;
    position: fixed;
    z-index: 10004;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    .content-white-bg();
    .hide-d-style {
      overflow: hidden;
      display: block;
      position: relative;
      .curse-title {
        font-weight: 600;
        text-align: center;
        font-size: 20px;
        color: #4A4A4A;
        letter-spacing: 0;
        line-height: 20px;
        margin: 40px 0 20px;
      }
      .layui-icon-close {
        position: absolute;
        right: 20px;
        top: 20px;
        display: block;
        font-size: 30px;
        color: #9B9B9B;
      }
      .del-hint{
        font-size: 14px;
        color: #6E6E6E;
        letter-spacing: 0;
        text-align: center;
        line-height: 14px;
      }
      .sure-btn{
        display: block;
        margin: 0 auto;
        width: 114px;
        height: 40px;
        background: #2F5AFF;
        border-radius: 7px;
        text-decoration: none;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
      }
    }
  }
  .get-ticket{
    display:none;
    width: 389px;
    height: 180px;
    .del-hint{
      margin-bottom: 26px;
    }
  }
  .curse-buy{
    display: none;
    width: 629px;
    height: 483px;
    .hide-d-style{
      padding: 0 40px;
    }
    .layui-icon-close{
      right: 40px;
      top: 40px;
    }
    .curse-title{
      margin: 40px 0 32px 0;
    }
    .curse-ord{
      border-bottom:2px solid  #F8F9FB;
      width: 549px;
      padding-bottom:20px;
      margin-bottom: 20px;
      .curse-img{
        display: inline-block;
        width: 280px;
        height: 157px;
        border-radius: 8px;
        margin-right: 20px;
        overflow: hidden;
      }
      .curse-inform-b{
        display: inline-block;
        vertical-align: top;
        margin-top: 10px;
        .curse-name-b{
          font-size: 17px;
          color: #4A4A4A;
          letter-spacing: 0;
          line-height: 17px;
          margin-bottom: 25px;
        }
        .msg-box{
          margin-bottom: 15px;
        }
        .teacher-msg-b{
          vertical-align: top;
          font-size: 14px;
          color: #4A4A4A;
          letter-spacing: 0;
          line-height: 14px;
          display: inline-block;
        }
        .date-curse{
          display: inline-block;
          font-size: 14px;
          color: #4A4A4A;
          letter-spacing: 0;
          line-height: 14px;
          font-style: normal;
        }
      }
    }
    .ord-msg{
      margin-bottom: 20px;
      overflow: hidden;
      .ord-item-msg{
        margin-bottom: 20px;
        p{
          display: inline-block;
          font-size: 16px;
          color: #4A4A4A;
          letter-spacing: 0;
          line-height: 16px;
        }
        .ord-t{
          width: 80px;
          margin-left: 10px;
        }
        .use-discounts{
          cursor: pointer;
        }
        .active{
          color: #FFBD00;
        }
        .layui-icon{
          color:#9B9B9B;
        }
      }
    }
    .buy-box{
      text-align: right;
      .layui-btn{
        border: 1px solid #2F5AFF;
        margin-left: 30px;
        width: 114px;
        height: 40px;
        border-radius: 8px;
        background: #2F5AFF;
        font-size: 14px;
        color: #FFFFFF;
        letter-spacing: 0;
        text-align: center;
        line-height: 40px;
      }
      .cancel-btn{
        background-color: #fff;
        color: #2F5AFF;
      }
      .buy-now-btn{
        text-decoration: none;
        display: inline-block;
      }
    }
  }
  .use-ticket{
    display: none;
    width: 629px;
    height: 483px;
    .hide-d-style{
      padding: 0 40px;
    }
    .layui-icon-close{
      right: 40px;
      top: 40px;
    }
    .layui-icon-left{
      position: absolute;
      left: 20px;
      top: 20px;
      display: block;
      font-size: 30px;
      color: #9B9B9B;
    }
    .ticket{
      overflow: hidden;
      background-color: #fff;
      width: 397px;
      height: 155px;
      margin: 0 auto 20px ;
      &:hover{
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
      }
      .ticket-over{
        width: 100%;
        height: 102px;
        border: 1px solid #efefef;
        border-bottom: 1px dashed #efefef;
        .t-o-l{
          float: left;
          margin: 36px 0 0 20px;
          font-size: 15px;
          font-weight:700;
          .face-value{
            font-size: 40px;
            font-style: normal;
          }
        }
        .t-o-c{
          float: left;
          margin: 27px 0  0 34px;
          .ticket-name{
            font-size: 20px;
            color: #4A4A4A;
            margin-bottom: 18px;
          }
          .use-range{
            font-size: 15px;
            color: #9B9B9B;
          }
        }
        .t-o-r{
          float: right;
          margin:36px 20px 0 0;
          .use-now{
            width: 92px;
            height: 35px;
            //background: #FF3A48;
            //box-shadow: 0 0 4px 0 rgba(255,59,48,0.50);
            border-radius: 8px;
            color: #fff;
            font-size: 15px;
            border: none;
          }
        }
      }
      .ticket-down{
        width: 100%;
        border: 1px solid #efefef;
        border-top: none;
        height: 53px;
        position: relative;
        box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
        &::before{
          position: absolute;
          left: -8px;
          top:-8px;
          width: 16px;
          height: 16px;
          background-color: #fff;
          content:'';
          display: block;
          border-radius: 0 8px 8px 0;
          border: 1px solid #efefef;
          border-left: none;
        }
        &::after{
          position: absolute;
          right: -8px;
          top:-8px;
          width: 16px;
          height: 16px;
          background-color: #fff;
          content:'';
          display: block;
          border-radius: 8px 0 0 8px;
          border: 1px solid #efefef;
          border-left: none;
        }
        .deadline{
          padding-left:20px;
          line-height: 53px;
          font-size: 15px;
          color: #9B9B9B;
          i{
            display: inline-block;
            font-style: normal;
          }
        }
      }
    }
    .can-use{
      .t-o-l{
        color: #FF3A48;
      }
      .t-o-r{
        .use-now{
          background: #FF3A48;
          box-shadow: 0 0 4px 0 rgba(255,59,48,0.50);
        }
      }
      .ticket-down{
        background: #FFFDFA;
      }
    }
    .if-use{
      padding-left: 74px;
      font-size: 16px;
      color: #4A4A4A;
      letter-spacing: 0;
      line-height: 16px;
      .layui-icon-circle{
        font-size: 16px;
        vertical-align: middle;
        margin-right: 16px;
      }
    }
  }
}
